<template>
  <div class="tabbar">
    <div class="tabbar_left">
      <el-icon style="margin-right: 10px" @click="changeIcon">
        <component
            :is="LayOutSettingStore.fold ? 'Fold' : 'Expand'"
        ></component>
      </el-icon>
      <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item
            v-for="(item, index) in $route.matched"
            :key="index"
            v-show="item.meta.title"
        >
          <el-icon>
            <component
                v-if="item.meta && item.meta.icon"
                :is="item.meta.icon"
            ></component>
          </el-icon>
          <span style="margin: 0 3px">{{ item.meta.title }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tabbar_right">
      <el-button
          size="small"
          icon="Refresh"
          circle
          @click="refresh"
      ></el-button>
      <el-button
          size="small"
          icon="FullScreen"
          circle
          @click="fullScreen"
      ></el-button>

      <el-popover placement="bottom" title="主题" :width="300" trigger="hover">
        <el-form>
          <el-form-item label="主题颜色">
            <el-color-picker
                @change="changeColor"
                v-model="color"
                show-alpha
                :predefine="predefineColors"
            />
          </el-form-item>
          <el-form-item label="暗黑模式">
            <el-switch
                v-model="dark"
                size="large"
                @change="changeDark"
                inline-prompt
            />
          </el-form-item>
        </el-form>
        <template #reference>
          <el-button size="small" icon="Setting" circle></el-button>
        </template>
      </el-popover>
      <img
          :src=userStore.avatar
          alt=""
          width="32px"
          height="32px"
          style="margin: 0 13px"
      />
      <el-dropdown>
        <span class="el-dropdown-link" style="margin-right: 10px">
          {{ userStore.username }}
          <el-icon class="el-icon--right" :size="20">
            <arrow-down/>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import useLayOutSettingStore from '@/store/modules/setting'
import {useRouter, useRoute} from 'vue-router'
//引入用户相关的仓库,获取当前用户的头像、昵称
import useUserStore from '@/store/modules/user'
import {ref} from 'vue'
//获取存储用户信息的仓库对象
let userStore = useUserStore()
let $router = useRouter()
let $route = useRoute()

let dark = ref(false)
let LayOutSettingStore:any = useLayOutSettingStore()
const changeIcon = () => {
  LayOutSettingStore.fold = !LayOutSettingStore.fold
}
const refresh = () => {
  LayOutSettingStore.refresh = !LayOutSettingStore.refresh
}
//全屏按钮点击的回调
const fullScreen = () => {
  //DOM对象的一个属性:可以用来判断当前是不是全屏模式[全屏:true,不是全屏:false]
  let full = document.fullscreenElement
  //切换为全屏模式
  if (!full) {
    //文档根节点的方法requestFullscreen,实现全屏模式
    document.documentElement.requestFullscreen()
  } else {
    //变为不是全屏模式->退出全屏模式
    document.exitFullscreen()
  }
}
const logout = () => {
  userStore.userLogout()
  $router.push({path: '/login', query: {redirect: $route.path}})
}
const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])
const changeDark = () => {
  let html = document.documentElement
  dark.value ? (html.className = 'dark') : (html.className = '')
}
const changeColor = () => {
  // document.documentElement 是全局变量时
  const el = document.documentElement

  // 设置 css 变量
  el.style.setProperty('--el-color-primary', color.value)
}
</script>

<style scoped lang="scss">
.tabbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  //background-image: linear-gradient(to right, #d3e0a3, #0bb623, #ffffff);

  .tabbar_left {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .tabbar_right {
    display: flex;
    align-items: center;

    //background-color: skyblue;
  }
}
</style>
